<template>
	<view>
		<u-navbar :is-back="false" title="">
			<view class="slot-wrap u-flex">
				<view class="left">
					<image src="../../static/img/acitivity/xiaodingwei.png" class="dizhi-icon"></image> 南昌
				</view>
				<view class="body">
					<image src="../../static/img/acitivity/sousuo.png" class="head-icon"></image>
					<input type="text" placeholder="" class="sou-input" />
				</view>
				<view class="right">
					<image src="../../static/img/acitivity/Notification.png" class="head-icon"></image>
					<image src="../../static/img/acitivity/bianji.png" class="head-icon"></image>
				</view>
			</view>
		</u-navbar>
		<view class="banner">
			<u-swiper :list="list" height="213" border-radius="20"></u-swiper>
		</view>
		<view class="nav_menu">
			<view class="menu-list">
				<image src="../../static/img/acitivity/xianshang.png" class="menu-icon"></image>
				<text class="menu-list-text">线上</text>
			</view>
			<view class="menu-list">
				<image src="../../static/img/acitivity/xianxia.png" class="menu-icon"></image>
				<text class="menu-list-text">线下</text>
			</view>
			<view class="menu-list">
				<image src="../../static/img/acitivity/fujin.png" class="menu-icon"></image>
				<text class="menu-list-text">附近</text>
			</view>
			<view class="menu-list">
				<image src="../../static/img/acitivity/wode.png" class="menu-icon"></image>
				<text class="menu-list-text">我的</text>
			</view>
		</view>
		<view class="huodong-top">
			<image src="../../static/img/acitivity/hudong3.png" class="huodong-icon"></image> 活动推荐
		</view>
		<view class="activity-list">
			<view class="activity-list-cell">
				<image src="../../static/demo/1.jpg" class="activity-img"></image>
				<view class="activity-body">
					<view class="activity-name">【活动】“一本书·益起读”线下读书公益活动“</view>
					<view class="activity-cont">
						<text>活动时间：2021-04-18 14:00</text>
						<text class="u-line-1">地址：上海黄浦区xx街xx号14栋2021室</text>
					</view>
					<view class="activity-body-bottom">
						<view class="activity-price"><text style="color: #ff0000; font-size: 34rpx;">170</text>元/人</view>
						<view class="acitivity-btn">活动参与</view>
					</view>
				</view>
			</view>
			<view class="activity-list-cell">
				<image src="../../static/demo/1.jpg" class="activity-img"></image>
				<view class="activity-body">
					<view class="activity-name">【活动】“一本书·益起读”线下读书公益活动“</view>
					<view class="activity-cont">
						<text>活动时间：2021-04-18 14:00</text>
						<text class="u-line-1">地址：上海黄浦区xx街xx号14栋2021室</text>
					</view>
					<view class="activity-body-bottom">
						<view class="activity-price"><text style="color: #ff0000; font-size: 34rpx;">170</text>元/人</view>
						<view class="acitivity-btn">活动参与</view>
					</view>
				</view>
			</view>
			<view class="activity-list-cell">
				<image src="../../static/demo/1.jpg" class="activity-img"></image>
				<view class="activity-body">
					<view class="activity-name">【活动】“一本书·益起读”线下读书公益活动“</view>
					<view class="activity-cont">
						<text>活动时间：2021-04-18 14:00</text>
						<text class="u-line-1">地址：上海黄浦区xx街xx号14栋2021室</text>
					</view>
					<view class="activity-body-bottom">
						<view class="activity-price"><text style="color: #ff0000; font-size: 34rpx;">170</text>元/人</view>
						<view class="acitivity-btn">活动参与</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg'
					}
				]
			};
		}
	}
</script>

<style lang="scss">
.slot-wrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	.left{
		display: flex;
		align-items: center;
		font-size: 24rpx;
		.dizhi-icon{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.body{
		flex: 1;
		margin-left: 30rpx;
		background-color: #eeeeee;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 0 15rpx;
		height: 60rpx;
		.sou-input{
			margin-bottom: 0;
			padding-left: 20rpx;
		}
	}
	.right{
		margin-left: 10rpx;
		.head-icon{
			margin-left: 20rpx;
		}
	}
	.head-icon{
		width: 40rpx;
		height: 40rpx;
		
	}
}
.banner{
	margin: 30rpx;
}
.nav_menu{
	display: flex;
	justify-content: center;
	margin: 0 30rpx 30rpx;
	.menu-list{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 25%;
		align-items: center;
	}
	.menu-icon{
		width: 48rpx;
		height: 48rpx;
	}
	.menu-list-text{
		font-size: 24rpx;
		margin-top: 10rpx;
	}
}
.huodong-top{
	display: flex;
	align-items: center;
	padding: 0 30rpx 30rpx;
	color: #040406;
	font-size: 30rpx;
	border-bottom: 1px solid #ebebeb;
	.huodong-icon{
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}
}
.activity-list{
	.activity-list-cell{
		display: flex;
		justify-content: space-between;
		padding: 40rpx 30rpx;
		position: relative;
		.activity-img{
			width: 240rpx;
			height: 205rpx;
			border-radius: 20rpx;
			margin-right: 30rpx;
		}
		.activity-body{
			flex: 1;
			.activity-name{
				font-size: 24rpx;
				color: #515151;
			}
			.activity-cont{
				margin: 15rpx 0;
				display: flex;
				flex-direction: column;
				color: #8e908f;
				font-size: 22rpx;
			}
		}
		.activity-body-bottom{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.activity-price{
				color: #8e908f;
				font-size: 24rpx;
			}
			.acitivity-btn{
				color: #FFFFFF;
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: #2ea34a;
				border-radius: 10rpx;
				font-size: 24rpx;
			}
		}
	}
}
.activity-list-cell::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 10rpx;
	background-color: #ebebeb;
	left: 0;
	bottom: -10rpx;
}
.activity-list-cell:last-child::after{
	height: 0;
}
</style>
